<template>
  <div>
    <!-- 物流模板 -->

    <el-row>
      <el-col :span="24"
        ><div class="hint">
          <i class="el-icon-warning"></i>
          <p>
            注意！ 物流模板，若修改不当，会影响订单运费的结算。<el-link
              @click="Examine = true"
              target="_blank"
              >查看计算公式</el-link
            >
          </p>
        </div></el-col
      >
    </el-row>

    <!-- 查看隐藏框 -->
    <el-dialog title="运费算法" :visible.sync="Examine" width="70%">
      <span
        >订单改价不影响运费计算
        单品运费包邮条件的判断、基于商品所有营销之后的金额判断(不包含红包，积分，优惠券)
        一笔订单中使用相同单品运费模板的所有商品件数、重量叠加后再计算
        订单包含多种运费模板时，取所有商品中，首件/首重/金额最大的运费模板，计算使用该模板的所有商品运费，使用其他模板的商品都按照各自模板的续件/续重/金额来计算，再求和。
        注意：计算时要排除包邮商品 例：一笔订单中包含：
        商品A10件（重量0.5KG）关联运费模板1（按重量、默认地区）：首重0.5KG，10元，续重1Kg，5元
        商品B10件（重量0.6KG）关联运费模板2（按重量、默认地区）：首重0.5KG，12元，续重0.5KG，6元
        商品C10件（重量0.5KG）关联运费模板3 ( 按件数、默认地区 )
        ：首件1件，5元，续件1件，4元
        商品D10件（重量0.5KG）关联运费模板4（按件数、默认地区）：首件1件，4元，续件1件，4元，江浙沪地区，购买满1件包邮
        计算过程为：
        1、对比收货地址，获取当前商品使用的运费模板相关地区的运费设置、包邮条件设置
        2、排除符合包邮条件的商品D，比较得知商品B首价较高 3、商品B运费 = 12
        +（0.6×10-0.5) ÷ 0.5 × 6 = 78 商品A运费 =（0.5×10）÷ 1 × 5 = 25
        商品C运费 = 10 × 4 = 40 商品D运费 = 0 总运费 = 78 + 25 + 40 = 143
        如何判断商品是否包邮
        例如：商品A设置的基础运费是10元，每增加一件，运费加2元，满3件包邮
        若：一笔订单中仅有商品A，A满3件则不参与计算运费，不满3件需参与计算
        若：一笔订单中商品B与A使用的运费模板一致，A\B各买2件，共4件，满足包邮条件。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Examine = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加模板按钮 -->
    <el-row :gutter="20" style="margin:20px 0">
      <el-col :span="4" style=" padding-left: 0px;">
        <el-button style="width:100%" type="primary" icon="el-icon-plus"
          >添加购物车模板</el-button
        >
      </el-col>
    </el-row>

    <!-- 物流模板表单 -->
    <el-table :data="Logistics_tableData" style="width: 100%">
      <el-table-column label="物流模板名称" width="180" prop="name">
      </el-table-column>
      <el-table-column label="运送方式" width="180" prop="date">
      </el-table-column>

      <el-table-column label="是否默认" width="180">
        <template slot-scope="scope">
          <!-- <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover> -->

          <el-tag :type="scope.row.isfo === '是' ? 'success' : 'info'">{{
            scope.row.isfo
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            v-if="scope.row.isfo ==='是'"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >设置为默认</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      // 隐藏框
      Examine: false,
      // 物流模板数据
      Logistics_tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          isfo: "是",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          isfo: "否",
        },
      ],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {},

  watch: {},
};
</script>
<style lang="scss" scoped>
.hint {
  background-color: #fdf6ec;
  height: 56px;
  padding: 8px 16px;
  box-sizing: border-box;
  color: #e6a23c;
  display: flex;
  align-items: center;
  .el-icon-warning {
    font-size: 28px;
    margin-right: 10px;
  }
}
</style>
